<template>
  <div :style="{ height: height, width: width }" />
</template>

<script>
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";

export default {
  mixins: [resize],
  props: {
    width: {
      type: String,
      default: "180px",
    },
    height: {
      type: String,
      default: "180px",
    },
    charTitle: {
      type: String,
      default: "库存",
    },
    charVaule: {
      type: String,
      default: "0",
    },
    charData: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      title: this.charTitle,
      value: this.charVaule,
      chart: null,
      legendData: [],
      seriesData: [],
    };
  },
  mounted() {
    this.$nextTick(async () => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart(title, value) {
      if (title && value) {
        this.title = title;
        this.value = value;
      }
      this.chart = echarts.init(this.$el, "macarons");
      // 在用户点击
      this.chart.on("click", (params) => {
        this.title = params.data.title;
        this.value = params.data.value;
        this.initChart();
      });
      this.chart.setOption({
        //graphic控制环形中间出现字，其中有两个对象，就是两行字
        graphic: [
          {
            type: "text", //控制内容为文本文字
            left: "center",
            top: "75px", //调整距离盒子高处的位置
            style: {
              fill: "#666", //控制字体颜色
              text: this.value, //控制第一行字显示内容
              fontSize: 20, //文字大小
            },
          },
          {
            type: "text",
            left: "center",
            top: "105px",
            z: 10,
            style: {
              text: this.title,
              fill: "#999",
              fontSize: 16, //文字大小
            },
          },
        ],
        color: ["#0d94ee", "#1fc8b1"],
        series: [
          {
            name: "百分比",
            type: "pie",
            radius: ["90%", "100%"],
            hoverAnimation: false,
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 3,
              borderColor: "#fff",
              borderWidth: 1,
            },
            label: {
              show: false,
              position: "left",
            },
            data: this.charData,
          },
        ],
      });
    },
  },
};
</script>
